'use client';

import { useState } from 'react';
import { useActivate, useUnactivate } from 'react-activation';

export default function UserPage() {
  const [searchTerm, setSearchTerm] = useState('');
  
  // 当组件被激活（从缓存中恢复）时触发
  useActivate(() => {
    console.log('用户页面被激活，保留的搜索词:', searchTerm);
  });
  
  // 当组件被停用（进入缓存）时触发
  useUnactivate(() => {
    console.log('用户页面被缓存，当前搜索词:', searchTerm);
  });

  return (
    <div className="p-6">
      <h1 className="text-2xl font-semibold mb-4">用户管理</h1>
      <div className="bg-white rounded-lg shadow">
        <div className="p-4 flex justify-between items-center border-b">
          <div className="flex gap-2">
            <input 
              type="text" 
              placeholder="搜索用户..." 
              className="px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
            <button className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
              搜索
            </button>
          </div>
          <button className="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600">
            添加用户
          </button>
        </div>
        
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                ID
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                用户名
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                邮箱
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                角色
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {[1, 2, 3, 4, 5].map((id) => (
              <tr key={id} className="hover:bg-gray-50">
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  {id}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  用户{id}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  user{id}@example.com
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  {id % 2 === 0 ? "管理员" : "普通用户"}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                  <button className="text-blue-600 hover:text-blue-900 mr-3">
                    编辑
                  </button>
                  <button className="text-red-600 hover:text-red-900">
                    删除
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        
        <div className="px-6 py-4 flex items-center justify-between border-t">
          <div className="text-sm text-gray-700">
            显示 <span className="font-medium">1</span> 到 <span className="font-medium">5</span> 条，共 <span className="font-medium">20</span> 条
          </div>
          <div className="flex gap-2">
            <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
              上一页
            </button>
            <button className="px-3 py-1 bg-blue-500 text-white rounded text-sm">
              1
            </button>
            <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
              2
            </button>
            <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
              3
            </button>
            <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>
  );
} 